@media ( max-width 768px )
  header
    left 0
    .navContent
      padding-left 0

@media ( max-width 1023px )
  main header
    width max(428px, 100% - 200px)
    max-width 100%
    position fixed
  nav
    max-width 428px
    height max-content
    min-height 100vh
    background-color var(--theme-bg-trans0)
    transform translateX(-100%)
    transition transform .6s
    pointer-events all
  .navItem
    padding .2em 4em
  .navContent
    overflow-y auto
    width 100%
    transition transform .6s
  .navBlock
    padding unset
    box-sizing border-box
  .navItemTitle
    padding 0 .2em 5px .2em
    color var(--theme-text-light)
    border-bottom 1px solid var(--theme-unimportant)
  .active > div > .navItemTitle::before
    border-color var(--theme-highlight)
  .expanded > nav
    transform translateX(0)
  .navItemList
    box-sizing border-box

@media ( min-width 1024px )
  header
    width 180px
  .navItem
    width 120px
  .navBlock
    position relative
    List-sum = 0
    for i in hexo-config('menu')
      List-sum += 3
    if hexo-config('search') && hexo-config('search.enable')
      List-sum += 2
    padding (30em / List-sum) 0
  .navItemTitle
    color var(--theme-text-light)
    &::before
      height 100%
      top 0
      box-sizing border-box

@media ( min-width 1440px )
  header
    width 240px
  .navItem
    width 150px

@media ( min-width 1912px )
  header
    width 310px
